<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="../css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="#">登录</a>
    </div>
    <form id="reg-form" action="login.html" method="get">

        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>


            <tr>
                <td>手机号</td>
                <td class="inputs"><input name="tel" type="text" id="tel">
                    <br>
                    <span id="tel_err" class="err_msg" style="display:none;">手机号格式有误</span>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>

</div>


<script>



    //1. 验证用户名是否符合规则
    //1.1 获取用户名的输入框
    var usernameInput = document.getElementById("username");

    //1.2 绑定onblur事件 失去焦点
    usernameInput.onblur = checkUsername;

    // 什么时间检查用户名（提交的时候，还有什么时候（失去焦点的时候）
    // 1.失去焦点检查
    // 2.提交时检查
    function checkUsername() {
        // 验证用户名是否合法,OK，返回true,不OK，返回false

        //1.3 获取用户输入的用户名，如何获取用户名这个元素来
        // document.getElementById("username") 这个组件
        // 定义变量有2种写法 let var 二者区别
        var username = document.getElementById("username").value.trim();
        console.log("username:"+username);
        //1.4 判断用户名是否符合规则：长度 6~12,单词字符组成
        // document.getElementById("username_err").style.display
        // 流程控制语句
        if(username.length >= 6 && username.length <= 12 ){
            // 符合规则，不显示错误信息
            // 先获取到组件(dom) <span>显示小段文本的</span> <div></div>
            document.getElementById("username_err").style.display = "none";
            return true;
        }else{
            // 不符合规则，显示错误信息
            document.getElementById("username_err").style.display = "";
            return false;
        }
    }


    //1. 验证密码是否符合规则
    //1.1 获取密码的输入框
    var passwordInput = document.getElementById("password");

    //1.2 绑定onblur事件 失去焦点
    passwordInput.onblur = checkPassword;

    function checkPassword() {
        //1.3 获取用户输入的密码

        //1.4 判断密码是否符合规则：长度 6~12

        return ;
    }


    //1. 验证手机号是否符合规则
    //1.1 获取手机号的输入框
    var telInput = document.getElementById("tel");

    //1.2 绑定onblur事件 失去焦点
    telInput.onblur = checkTel;

    // 两个检查点
    // 1. 失去焦点
    // 2. 提交表单时
    function checkTel() {
        //1.3 获取用户输入的手机号,习惯性动作，去掉前后的空白
        var phone = document.getElementById("tel").value.trim();
        //1.4 判断手机号是否符合规则：长度 11，数字组成，第一位是1
        // 正则表达式
        var regUser = /^\w{6,12}$/;
        var reg = /^[1]\d{10}$/;
        // 匹配规则
        var flag = reg.test(phone);
        if(flag){
            // 符合规则 -> 去掉错误信息  span 控制它的显示与不显示 带none不显示这块区域，不带none，显示这块区域
            document.getElementById("tel_err").style.display = 'none';
            return true;
        }else{
            // 不符合规则 -> 显示规则信息
            document.getElementById("tel_err").style.display = '';
            return false;
        }
    }

    // 自定义一个对象
    // 格式（数据+函数）
    // 属性:值
    // 函数:function(){}
    // 数据：用户名、密码、手机号
    // 函数：打印
    // 提前对象
    var userObj = {
        username:"",
        password:"",
        phone:"",
        print:function (){
            console.log("用户名:"+this.username);
            console.log("密码:"+this.password);
            console.log("手机号:"+this.phone);
        }
    };
    // 对象调用方法
    userObj.print();
    //1. 获取表单对象
    // DOM 文档对象模型，网页被加载之后，通过JS控制页面的元素（Element）
    // "reg-form" 就是我们表达元素的唯一标识
    var regFormObj = document.getElementById("reg-form");
    // regFormObj 代表表单对象 任何页面上的标签都是称之为 dom对象，都是可以操作的
    //2. 绑定onsubmit 事件  onsubmit是表单独有的一个事件
    regFormObj.onsubmit = function () {
        // 如果函数返回 false,表单不能提交，如果返回true，是可以提交的
        // 这里面主要是判断页面的元素数据是不是合法。
        //挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false
        // && checkPassword() && checkTel();
        // 先判断用户名，再去判断其他的，最好拼起来。这是思路。
        var flag = checkUsername() && checkTel();
        console.log(flag);
        if(flag){
            // 如果验证数据成功，这个时候要把数据发送给服务器
            // 数据发送给服务器之前，此时把数据封装成自定义对象
            // 拿到用户名、密码、手机号 注册还会拿到很多
            // 把合法的用户名、密码、手机号封装到对象中
            userObj.username = document.getElementById("username").value.trim();
            userObj.password = document.getElementById("password").value.trim();
            userObj.phone = document.getElementById("tel").value.trim();
            userObj.print();
            alert("oK");
        }
        return flag;
    }

</script>
</body>
</html>